<template>
    <view>
        <view class="m-bottom-pannel">
            <slot></slot>
            <uni-icons
                type="close"
                size="30"
                v-if="availableClose"
                class="m-bottom-close"
                @click="close"
                color="#f8f8f8"
            ></uni-icons>
        </view>
        <view class="m-bottom-pannel-helper"></view>
    </view>
</template>

<script lang="ts" setup>
const props = defineProps({
    availableClose: { type: Boolean, default: false },
    height: { type: String, default: 'auto' }
})
const emit = defineEmits(['close'])
function close() {
    emit('close')
}
</script>

<style lang="scss" scoped>
.m-bottom-pannel {
    position: fixed;
    bottom: var(--window-bottom);
    width: 750rpx;
    z-index: $m-z-index-l1;
    background-color: white;
    height: v-bind(height);
}
.m-bottom-pannel-helper {
    height: v-bind(height);
}
.m-bottom-close {
    position: absolute;
    right: 0;
    line-height: v-bind(height);
}
</style>
